<template>
	<view class="card">
		<uni-card isFull padding="0">
			<view class="header" slot="title">
				<!-- 头部:左侧的图标 -->
				<image class="icon" src="../../static/img/computer_icon.png" mode="widthFix"></image>
				<!-- 头部:中间的标题字 -->
				<text class="title">{{title}}</text>
				<!-- 头部:右侧的更多连接 -->
				<navigator class="more" url="/pages/list/list">更多</navigator>
			</view>
			<!-- 
			uni-grid:宫格组件
			square	是否方形显示
			 showBorder 是否显示边框
			 -->
			<uni-grid :square="false" :showBorder="false" :column="2">
				<uni-grid-item class="grid-item" v-for="(p,i) in data" :key="i">
					<uni-card class="product-card" padding="0" margin="0">
						<image class="pic" :src="base+p.pic" mode="heightFix"></image>
						<text class="title">{{p.title}}</text>
						<view class="bottom">
							<text class="price">￥{{p.price}}</text>
							<button @click="showDetails(p.pid)" class="btn" type="primary" size="mini">查看详情</button>
						</view>
					</uni-card>
				</uni-grid-item>
			</uni-grid>
		</uni-card>
	</view>
</template>

<script>
	import {
		base
	} from '@/service'
	export default {
		name: "xzProductCard",
		// 声明子组件的属性-父组件可以通过子组件的属性传递数据
		props: {
			title: {
				type: String, //控制属性的类型
				required: true,
				default: "卡片标题"
			},
			data: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				base,
			};
		},
		methods: {
			showDetails(num) {
				// 导航跳转
				uni.navigateTo({
					url:'/pages/details/details?pid='+num
				})
			}
		},
	}
</script>

<style lang="scss">
	.card {
		padding-top: $uni-spacing-col-lg 0;
		.header {
			padding: $uni-spacing-col-base $uni-spacing-row-base;
			border-bottom: $uni-border-width $uni-border-style $uni-border-color;
			// view默认已经更改为弹性容器,主轴方向改为纵向,此处应该改为横向
			flex-direction: row;
			// 子元素在交叉轴方向上对其方式:居中
			align-items: center;
			.icon {
				width: $uni-img-size-base;
			}
			.title {
				flex: 1;
				margin-left: $uni-spacing-row-base;
				font-weight: bold;
			}

			.more {
				color: $uni-text-color-grey;
				font-size: $uni-font-size-sm;
			}
		}

		.grid-item {
			padding: $uni-spacing-col-sm $uni-spacing-row-lg;
			.product-card{
				padding: $uni-spacing-col-base $uni-spacing-row-base !important;
			}
			.title {
				font-size: $uni-font-size-sm;
				/* 文本仅显示一行,溢出的省略号显示 */
				white-space: nowrap; //不换行
				overflow: hidden; //溢出隐藏
				text-overflow: ellipsis; //文本溢出显示省略号
			}

			.pic {
				height: 180rpx;
				align-self: center; //弹性子元素在容器中如何对齐自身:水平对齐
			}

			.bottom {
				//弹性容器主轴对齐:横向
				flex-direction: row;
				// 弹性容器中的子元素方向:空白在中央
				justify-content: space-between;
				// 弹性容器中的子元素在交叉轴方向对齐方式:居中对齐
				align-items: center;
				margin-bottom: $uni-spacing-col-base;

				.price {
					font-size: $uni-font-size-sm;
					font-weight: bold;
					color: $uni-color-primary;
				}
				.btn {
					padding: 0 2rpx;
					margin: 0;
				}
			}
		}
	}
</style>
